<template>
  <div>
    <Hander :describe="'查看详情'" :title="'预约课程'" :detailData="teacherData" />
    <div class="content">
      <p class="co_title">选择时间 (北京时间)</p>
      <div class="co_time">
        <div class="opt_block">
          <ul>
            <li
              :class="item.disable==0?'disabel':isSelect.day==item.day?'active':''"
              @click="selectDay(item)"
              v-for="(item,index) in weekTime"
              :key="index"
            >
              <span>{{week[index]}}</span>
              <span>{{item.month}}/{{item.day}}</span>
              <i v-show="item.day==isSelect.day"></i>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="tiems.length!=0" class="op_content">ddd</div>
      <div v-else>
        <Empty class="empty" :empty_type="{name: '暂无信息'}"></Empty>
      </div>
    </div>
    <van-button @click="submit" class="bottom">立即预约</van-button>
  </div>
</template>

<script>
import Hander from "./hander";
import { orderTime } from "@/request/http";
import Empty from "../../../components/empty";
export default {
  name: "",
  data() {
    return {
      teacherData: {},
      week: [
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
        "周日",
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
        "周日"
      ],
      weekTime: [],
      isSelect: {},
      tiems: [],
      oto_course: {}
    };
  },
  props: [],
  components: {
    Hander,
    Empty
  },
  mounted() {
    this.$http.get(`/teacher/${this.$route.query.id}`).then(res => {
      // console.log(res.teacher);
      this.teacherData = res.teacher;
    });
    this.initTime();
  },
  methods: {
    selectDay(item) {
      if (item.disable == 0) {
        return;
      }
      this.isSelect = item;
      this.gettime();
    },
    gettime() {
      let obj = {
        teacher_id: 44,
        week_day: 5,
        is_next: 0
      };
      orderTime(obj).then(res => {
        console.log(res);
        if (res.otoCourseList.length) {
          this.tiems = res.otoCourseList;
        }
      });
    },
    //周几
    getWeek() {
      let date = `${this.isSelect.year}/${this.isSelect.month}/${this.isSelect.day}`;
      let weekday = new Date(date).getDay();
      if (weekday == 0) weekday = 7;
      return weekday;
    },
    //预约
    submit() {
      if (this.oto_course.start_play) {
        console.log(this.oto_course);
      } else {
        this.$toast("请选择预约时间");
      }
    },
    //选择时间
    initTime() {
      let { days, day } = this.$pub.initDays();
      // console.log(days, day);
      days.map(v => {
        // console.log(v);
        if (v.day == day) {
          this.isSelect = v;
        }
        if (v.day < 10) v.day = "0" + v.day;
        if (v.month < 10) v.month = "0" + v.month;
      });
      this.weekTime = days;
    }
  }
};
</script>

<style scoped>
.op_content {
  width: 95%;
  margin: 10px auto;
}
.bottom {
  width: 100%;
  height: 45px;
  background: #eb6100;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 45px;
  color: #fff;
  font-size: 16px;
}
.content {
  margin-top: 65px;
  width: 95%;
  margin: 65px auto;
}
.content > .co_title {
  font-size: 14px;
  padding-left: 10px;
  border-left: 3px orange solid;
}
.content > .co_time {
  margin: 0 auto;
  width: 100%;
  height: 74px;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  padding: 0 10px;
  overflow: auto;
  display: flex;
  box-sizing: border-box;
}
.content > .co_time > .opt_block {
  border-bottom: 1px solid #f1f1f1;
  display: flex;
}
.content > .co_time > .opt_block > ul {
  display: flex;
  align-items: center;
}
.content > .co_time > .opt_block > ul > li {
  width: 59px;
  height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content > .co_time > .opt_block > ul > li > span {
  padding: 3px 0px;
}
.content > .co_time > .opt_block > ul > li > span:nth-child(2) {
  margin-bottom: 5px;
}
.content > .co_time > .opt_block > ul > li > i {
  position: relative;
  bottom: 0px;
  left: 12%;
  width: 20px;
  height: 4px;
  background: rgba(65, 105, 255, 1);
  border-radius: 4px;
  transform: translateX(-50%);
}
.content > .co_time > .opt_block > ul > .active {
  color: chocolate;
}
.content > .co_time > .opt_block > ul > .disabel {
  color: #c2c2c2;
}
</style>